<template>
    <div class="app-container">
      <div class="material-top"> 
         <div class="material-title"> 新增合同模板 </div>
          <el-button type="primary" color="#fff" @click="goBack"  :icon="ArrowLeft">返回</el-button>
      </div>
      <div class="material-main">
         <el-form class="form-content" :model="formData" ref="addTemplates" :rules="rules" label-width="120px" >
            <el-row >
               <el-col :span="8" :offset="2">
                  <el-form-item label="合同模板编号" prop="code"><el-input  v-model="formData.code" /></el-form-item>
                  <el-form-item label="合同模板名称" prop="name"> <el-input v-model="formData.name" /> </el-form-item>
                  <el-form-item label="适用担保类别" prop="type"> 
                     <!-- <el-row :gutter="20">
                        <el-col :span="12">
                           <el-select   v-model="typeOne"  placeholder="请选择" >
                                        <el-option
                                        v-for="item in oneArr"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        />
                          </el-select>
                        </el-col>
                        <el-col :span="12"> -->
                           <el-select  v-model="formData.type"  placeholder="请选择" >
                                        <el-option
                                        v-for="item in twoArr"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        />
                                    </el-select>

                        <!-- </el-col>
                     </el-row> -->
                  </el-form-item>
                  <el-form-item label="是否启用" prop="status">
                     <el-radio-group  v-model="formData.status">
                     <el-radio label="1" >是</el-radio>
                     <el-radio label="2" >否</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
               </el-row>
                  <el-row style="margin-bottom: 20px;" >
                     <el-col :span="2" :offset="2"  class="productImg"> 合同内容</el-col>
                   <el-col :span="14"><Editor   ref="editorRef"  :modelValue="formData.content" :height="200"></Editor></el-col> 
                  </el-row>
                  <el-row style="margin-bottom: 20px;" >
                     <el-col :span="2" :offset="2"  class="productImg"> 标签说明</el-col>
                   <el-col :span="18">
                      <el-row >
                         <el-col :span="6" class="template-text" >担保产品类别：$Loan_Product_Sort$</el-col>
                         <el-col :span="6" class="template-text" >担保产品类别：$Loan_Product_Sort$</el-col>
                         <el-col :span="6" class="template-text" >担保产品类别：$Loan_Product_Sort$</el-col>
                      </el-row>
                      <el-row >
                         <el-col :span="6" class="template-text" >还款金额：$Repayment_Amount$</el-col>
                         <el-col :span="6" class="template-text" >待还金额：$Remanent_Amount$</el-col>
                         <el-col :span="6" class="template-text" >担保编号：$Loan_Id$</el-col>
                      </el-row>
                      <el-row >
                         <el-col :span="6" class="template-text" >担保名称：$Loan_Name$</el-col>
                         <el-col :span="6" class="template-text" >担保期限：$Loan_Term$</el-col>
                         <el-col :span="6" class="template-text" >还款期数：$Repayment_Nubmer$</el-col>
                      </el-row>
                      <el-row >
                         <el-col :span="6" class="template-text" >担保人姓名：$Borrower_Name$</el-col>
                         <el-col :span="6" class="template-text" >担保人手机号：$Borrower_Phone_Number$</el-col>
                         <el-col :span="6" class="template-text" >担保人身份证：$Borrower_Identity$</el-col>
                      </el-row>
                  </el-col> 
                  </el-row>
       </el-form>
       </div>
       <el-form label-width="100px">
          <div style="text-align: center;margin-left:-120px;margin-top:30px;">
             <el-button type="primary"  @click="sumbitTemplate()">提交</el-button>
          </div>
       </el-form>
    </div>
 </template>
 <script setup name="AddTemplate">
 import { addTemplate } from "@/api/product/template";
 import { ArrowLeft } from  '@element-plus/icons-vue'
import { reactive } from 'vue';
 const typeOne = ref();
 const  oneArr = ref([
    { value: "1",label: "个人",},
    { value: "2",label: "企业",}
    ]);
 const { proxy } = getCurrentInstance();
 const twoArr = ref([
 {
      value:"1",
    label:"个人信用"
  },{
    value:"2",
    label:"个人分期"
    },{
    value:"3",
    label:"个人分期"
    },{
    value:"4",
    label:"个人抵押"
    },{
    value:"5",
    label:"企业信用"
    },{
    value:"6",
    label:"企业分期"
    },{
    value:"7",
    label:"企业租赁"
    }
    ]);
 const data = reactive({
   formData:{},
   rules: {
      code:[{ required: true, message: "合同模板编号不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
      name:[{ required: true, message: "合同模板名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
      topic:[{ required: true, message: "产品介绍不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
      type:[{ required: true, message: "请选择适用担保类别", trigger: "change" }]
   }
 });
const {formData,rules} = toRefs(data)
const dataArr = ref([
   { key:"工作证明",label:"工作证明"},
   { key:"车辆证明",label:"车辆证明"},
   { key:"房产证明",label:"房产证明"},
   { key:"学历证明",label:"学历证明"},
   { key:"银行流水证明",label:"银行流水证明"},
   { key:"保单证明",label:"保单证明"},
   { key:"其它证明",label:"其它证明"}
])
const value = ref([])
 /** 重置表单 */
 function resetFrom(){
   formData.value = {
      name:undefined,
      topic:undefined,
      type:undefined,
      channel:undefined
   }
 }
 /** 返回 */
 function goBack() {
   proxy.$tab.closeOpenPage('template')
 };
 /** 提交信息 */
 function sumbitTemplate() {
   proxy.$refs["addTemplates"].validate(valid => {
      if(valid){
         addTemplate({
            ...formData.value,
           content:proxy.$refs.editorRef.content
           }).then(response => {
               proxy.$modal.msgSuccess("新增成功");
               goBack();
        });
      }
   })

 };
 resetFrom();
 </script>
 <style lang="scss">
 .material-title{
   font-size:15px;
   font-weight: bold; 
 }
.material-top{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #ddd;
}
.material-main{
   width:90%;
   // background-color: #bfbfbf;
}
.material-form{
   margin: 20px;
   background-color: #fff;
   padding-bottom: 40px;
}
.apply-form{
   background: #fff;
}
.apply-state{
   background-color: rgba(255, 204, 153, 1);
   // font-size: 14px;
   padding-left:20px ;
   line-height: 42px;
}
.productImg{
   font-weight: bold;
   font-size: 14px;
   color: #606266;
   width: 120px;
   padding-right: 10px;
   text-align: right;
}
.form-title{
   background-color:#a2a6ac ;
   line-height: 52px;
   padding-left: 20px;
   font-size: 18px;
   color:#fff;
   margin-bottom: 20px;
}
.form-content{
   margin-top: 30px;
}
.template-text{
   font-size: 12px;
   line-height: 32px;
}

</style>
 